<template>
  <view class="clearable">
    <view class="content" :class="{ float: props.float }">
      <slot></slot>
    </view>
    <view
      class="icon"
      v-if="props.value != undefined && props.value.toString().length"
      @click="onClearClick"
    >
      <icon type="clear" size="12" />
    </view>
  </view>
</template>

<script lang="ts" setup>
const props = withDefaults(
  defineProps<{
    value?: any;
    float?: boolean;
  }>(),
  {},
);

const emits = defineEmits<{
  (event: 'clear'): void;
}>();

const onClearClick = () => {
  emits('clear');
};
</script>

<style lang="scss" scoped>
.clearable {
  position: relative;
  .content {
    padding-right: 20px;
    &.float {
      padding-right: 0;
    }
  }
  .icon {
    position: absolute;
    width: 20px;
    height: 100%;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
